<template>
    <!-- 导航栏 -->
    <van-nav-bar title="汤臣优选精彩在籍" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 搜索 -->
    <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词">
        <template #action>
            <div @click="onClickButton">搜索</div>
        </template>
    </van-search>
    <!-- 分类 -->

    <!-- 数据展示 -->
    <div class="m-box" v-for="(item, index) in searchList" :key="item.id" @click="onDetail(item.id)">
        <img :src="item.picture" alt="logo" />
        <div class="m-right">
            <p>{{ item.product }}</p>
            <p>￥{{ item.price }}</p>
        </div>
    </div>

    <!-- <van-grid :border="false" :column-num="3" class="m-box" v-for="(item, index) in searchList" :key="item.id" @click="onDetail(item.id)">
        <van-grid-item>
            <van-image :src="item.picture" />
            <div class="m-right">
            <p>{{ item.product }}</p>
            <p>￥{{ item.price }}</p>
        </div>
        </van-grid-item>
    </van-grid> -->

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { RequestProductSearch } from '@/api/search'
import { useProductDetail } from '@/hooks/home'
import { Toast } from 'vant';
import 'vant/es/toast/style';

const { onDetail } = useProductDetail()
const searchValue = ref('')
let searchList = ref([])

const onClickLeft = () => history.back();
const onClickButton = async () => {
    let productSearch = searchValue.value
    let data = await RequestProductSearch(productSearch)
    const { resultCode, resultInfo } = data
    if (resultCode == 1) {
        searchList.value = resultInfo.list
    }
    if (resultCode == -1) {
        // alert('没有该商品')
        searchList.value = ''
        Toast.fail('抱歉，亲，还没有该商品')
    }
}


</script>

<style lang="scss" scoped>
img {
    width: 150px;
    height: 150px;
}
</style>